<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>bootstrap表单样式 基础、内联、横向</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="../css/starter-template.css" rel="stylesheet">
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>

</head>
<!-- 表单样式 ， 表单基础，内联表单，横向表单-->
<body>
<!-- 表单样式 -->
<!--  style="border:1px #2b669a solid" -->
<div class="container">
    <form action="#" method="post">
        <!-- fieldset :html5的标签，就是用于分组，显示明确，但是在某些时候，这个标签的效果没有显示出来 -->
        <!-- 如果fieldset里面用属性 disabled 表单中的所有全被禁用 -->
        <fieldset>
            text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color
            <legend>用户登录</legend>
            <!-- 控制组件大小的方法 input-lg 等等 -->
            <input class="form-control input-lg" type="text" placeholder=".input-lg">
            <input class="form-control" type="text" placeholder="Default input">
            <input class="form-control input-sm" type="text" placeholder=".input-sm">

            <select class="form-control input-lg">...</select>
            <select class="form-control">...</select>
            <select class="form-control input-sm">...</select>
            水平排列的表单组的尺寸<br/>
            通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸<br/>
            <div class="form-group form-group-lg">
                <label class="col-sm-2 control-label">Large label</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
                </div>
            </div>
            <div class="form-group form-group-sm">
                <label class="col-sm-2 control-label">Small label</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
                </div>
            </div>
            <div>
                <!-- 添加图标步骤： -->
                <!-- 1.在最外层先标记  has-feedback 标签，标识可以添加图标  -->
                <!-- 2.反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上  -->
                <!-- 3.添加图片固定的 <span> 元素 -->
                <div class="has-feedback has-error form-group">
                    <label class="control-label">用户名：</label>
                    <!-- autofocus : 当网友打开，该输入框自动获得焦点 -->
                    <input class="form-control" autofocus type="text" name="user" placeholder="输入用户名"/>
                    <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group col-sm-6">
                    <div class="has-feedback has-error form-group">
                        <label class="control-label">测试图标位置：</label>
                        <!-- disabled : 禁用 -->
                        <input class="form-control" disabled type="text" value="王大哥" name="user"/>
                        <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
                    </div>
                </div>
            </div>
            <div class="form-group col-sm-6">
                <label class="control-label">曾用户名：</label>
                <!-- readonly :只读状态  -->
                <input class="form-control" readonly type="text" value="只读状态" name="user"/>
            </div>
            <!-- 检验成功显示状态 -->
            <div class="has-success form-group col-sm-6">
                <label class="control-label">检测昵称是否存在</label>
                <input class="form-control" type="text" value="校验状态-成功" name="user"/>
            </div>
            <div class="has-warning form-group col-sm-6">
                <label class="control-label">检测昵称是否存在</label>
                <input class="form-control" type="text" value="校验状态-警告" name="user"/>
            </div>
            <div class="has-error form-group col-sm-6">
                <label class="control-label">检测昵称是否存在</label>
                <input class="form-control" type="text" value="校验状态-错误" name="user"/>
            </div>
            <div class="has-feedback form-group col-sm-6">
                <label class="control-label">添加额外图标</label>
                <input class="form-control" type="text" value="添加额外图标" name="user"/>
            </div>
            <div class="col-sm-6 radio">
                <label class="radio-inline"><input type="radio" value="1" name="sex">男</label>
                <label><input type="radio" value="2" name="sex">女</label>
            </div>
            <div class="form-group">
                <label class="control-label">密码：</label>
                <input class="form-control" type="password" name="pwd" placeholder="输入密码"/>
            </div>
            <div class="form-group">
                <label class="control-label">邮箱：</label>
                <input class="form-control" type="email" name="emai" placeholder="输入邮箱"/>
            </div>
            <div class="has-error checkbox">
                <label><input type="checkbox">记住密码</label>
            </div>
            <div class="btn">
                <input type="submit" class="btn btn-default">
            </div>
        </fieldset>
    </form>
</div>
</body>
</html>